<template>
    <div class="login">
        <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
                       linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
                       :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
        </vue-particles>
        <el-card class="login-card">
            <div slot="header">
                <h3 class="title">天网短视频获客系统</h3>
            </div>
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
                <el-form-item prop="account">
                    <el-input v-model="dataForm.account" placeholder="账号" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="dataForm.password" placeholder="密码" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-btn" type="primary" @click="dataFormSubmit">登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import {
        getUUID
    } from "@/util/index.js";
    import {
        con
    } from "@/config/index.js";

    export default {
        name: "login",
        data() {
            return {
                dataForm: {
                    account: "", // admin
                    password: "", // admin123456
                },
                dataRule: {
                    account: [{
                        required: true,
                        message: "帐号不能为空",
                        trigger: "blur"
                    },],
                    password: [{
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    },]
                },
            };
        },
        mounted() {
            sessionStorage.clear(); // 把所有的缓存都删除
			
			
        },
        methods: {
            dataFormSubmit() {
                this.$refs["dataForm"].validate((valid) => {

                    if (valid) {
				this.$http.post("user/login",this.dataForm).then((response) => {
					
					if(response.code==1){
						this.$store.state.userInfo=response.data.userinfo;
						//console.log(this.$store.state.userInfo)
						window.sessionStorage.setItem("token",response.data.userinfo.token);
						window.sessionStorage.setItem("userinfo",JSON.stringify(response.data.userinfo));
						window.sessionStorage.setItem("rules_list",JSON.stringify(response.data.rules_list));
						this.$router.replace({path: "/layout"});
						this.$store.state.token=response.data.userinfo.token;
						//console.log(this.$store.state.token,"333333333333")
						 
					}else{
						this.$message({
						    type: 'error',
						    message: response.msg
						})
					}
				//	
				})

                        // 跳转页面
                      /*  setTimeout(() => {
                            this.$router.replace({
                                path: "/layout"
                            });
                        }, 1500) */
                    }
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .login {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: #004444;

        .login-card {
            width: 420px;
            height: 280px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;

            .login-btn {
                width: 100%;
            }
        }
    }
</style>
